<template>
	<view>
		<view class="content-box">
			<form @submit="formSubmit">
			<view class="from-box">
			<view class="from-item">
				<image class="icon" src="/static/image/login/phone.png" mode="aspectFit"></image>
				<input type="text" @input="mobileInput" value="" name="mobile" placeholder="请输入手机号" class="input" />
			</view>
			<view class="from-item">
				<image class="icon" src="/static/image/login/password.png" mode="aspectFit"></image>
				<input type="text"  name="verifyCode" value="" placeholder="请输入验证码" class="input" />
				<view class="forget" @click="getcode">
					{{time == 60 ? '获取验证码' : '重新发送（'+time +'）' }}
				</view>
			</view>
			<view class="from-item">
				<image class="icon" src="/static/image/login/user.png" mode="aspectFit"></image>
				<input type="text" name="name" value="" placeholder="请输入姓名" class="input" />
			</view>
			<view class="from-item">
				<image class="icon" src="/static/image/login/password.png" mode="aspectFit"></image>
				<input type="password" name="password" value="" placeholder="请输入密码" class="input" />
			</view>
			<view class="from-item">
				<image class="icon" src="/static/image/login/password.png" mode="aspectFit"></image>
				<input type="password" name="againpassword" value="" placeholder="请再次输入密码" class="input" />
			</view>
			<view class="from-item">
				<image class="icon" src="/static/image/login/user.png" mode="aspectFit"></image>
				<input type="number" name="recommendMobile" value="" placeholder="请输入推荐人电话号码(非必填)" class="input" />
			</view>
			</view>
			
			<button form-type="submit" class="login-button">
				注册
			</button>
		</form>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		
		data() {
			return {
				time:60,
				codetimer:null,
			}
		},
		methods: {
			mobileInput:function(e){
				this.account = e.target.value;
			},
			getcode:function(){
				let that = this;
				var time = that.time;
				let account = this.account;
				console.log(account);
				let myreg=/^1[3456789]\d{9}$/;
				if(time == 60){
					if(account == ''){
						uni.showToast({
							title: '请输入手机号',
							icon:'none',
							duration: 2000
						});
						return false;
					}else if(!myreg.test(account)){
						uni.showToast({
							title: '手机号码格式不对',
							icon:'none',
							duration: 2000
						}); 
						return false;
					}
					that.sendCode();
				 that.codetimer = setInterval(function(){
					 time = that.time;
					 if(time > 0){
						time --; 
					 }else{
						 time = 60;
						 clearInterval(that.codetimer);
					 }
					 console.log(time);
					 that.time = time;
				 }, 1000);
				 }
			},
			/**
			 * 发送登陆验证码
			 */
			sendCode:function(){
				let data = {"mobile":this.account,"type":"register"};
				api.verifyCode(data).then();
			},
			formSubmit:function(e){
				let that = this;
				let data = e.detail.value;
				let myreg=/^1[3456789]\d{9}$/;
				if(data.mobile == ''){
					uni.showToast({
						title: '请输入手机号',
						icon:'none',
						duration: 2000
					});
				}else if(data.verifyCode == ''){
					uni.showToast({
						title: '请输入验证码',
						icon:'none',
						duration: 2000
					});
				}else if(data.name == ''){
					uni.showToast({
						title: '请输入姓名',
						icon:'none',
						duration: 2000
					});
				}else if(data.password=='' || data.againpassword == ''){
					uni.showToast({
						title: '请输入密码',
						icon:'none',
						duration: 2000
					});
				}else if(data.againpassword != data.password){
					uni.showToast({
						title: '密码不一致，请重新输入',
						icon:'none',
						duration: 2000
					});
				}else if (!myreg.test(data.mobile)) {
				   uni.showToast({
				   	title: '手机号码格式不对',
				   	icon:'none',
				   	duration: 2000
				   }); 
				}else{
					delete data.againpassword;
					api.register(data).then(res=>{
						uni.showToast({
							title: '注册成功',
							duration: 2000,
							complete:function(res){
								that.$emit('confirm');
							},
						}); 
						
					});
				}
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
			},
		}
	}
</script>

<style lang="scss" scoped>
.content-box{
			background-color: white;
			border-radius: 10rpx;
			width: calc(100% - 140rpx);
			margin: 0 auto;
			margin-top:60rpx;
			padding:20rpx 20rpx;
			padding-bottom:80rpx;
			position: relative;
			box-sizing: border-box;
			// overflow: hidden;
			.from-box{
				margin:0 20rpx;
			.from-item{
				padding:20rpx 0;
				display: flex;
				border-bottom: 1px solid #efefef;
				.icon{
					width:60rpx;
					height: 60rpx;
				}
				.input{
					flex: 1;
					height: 60rpx;
					line-height: 60rpx;
					margin-left:20rpx;
					font-size: 30rpx;
				}
				.forget{
					line-height: 60rpx;
					font-size: 28rpx;
				}
			}
			}
			.login-button{
				position: absolute;
				width:70%;
				line-height: 100rpx;
				text-align: center;
				background-color: #4269e2;
				color: white;
				border-radius: 50rpx;
				left: 15%;
				bottom:-50rpx;
			}
		}
</style>
